<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('官方二维码设置')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />

</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content fadeInRight white-bg">
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class=" control-label ">官方公众号</label>
                    <input type="hidden" name="imgUrl" id="wxcode" th:value="${wxcode}"/>
                    <div class="">
                        <input id="wxFile" name="file" type="file" />
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class=" control-label ">官方抖音号</label>
                    <input type="hidden" name="imgUrl" id="dycode" th:value="${dycode}"/>
                    <div class="">
                        <input id="dyFile" name="file" type="file" />
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group" >
                    <label class=" control-label ">官方微博号</label>
                    <input type="hidden" name="imgUrl" id="wbcode" th:value="${wbcode}"/>
                    <div class="">
                        <input id="wbFile" name="file" type="file" />
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 30px; text-align: center;">
            <button class="btn btn-primary" type="button" onclick="save()">保存</button>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />

</body>
<script type="text/javascript">

    $(function (){
        initFile('wxFile', 'wxcode')
        initFile('dyFile', 'dycode')
        initFile('wbFile', 'wbcode')
    })

    function initFile(fileId, urlId) {
        var urlEl = $('#'+urlId)
        const val = urlEl.val()
        const preview = []
        if(val) {
            preview.push(base + val)
        }

        $('#'+fileId).fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true,
            initialPreviewAsData: true,
            initialPreview: preview
        }).on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            log.info("return url：" + rsp.url)

            urlEl.val(rsp.fileName)
        }).on('fileremoved', function (event, id, index) {
            urlEl.val('')
            $("input[name='" + event.currentTarget.id + "']").val('')
        }).on('filedeleted', function() {
            urlEl.val('')
        }).on('filesuccessremove', function() {
            urlEl.val('')
        }).on('filecleared', function() {
            urlEl.val('')
        })
    }

    function save() {
        const wxcode = $('#wxcode').val()
        const dycode = $('#dycode').val()
        const wbcode = $('#wbcode').val()

        const data = {wxcode, dycode, wbcode}

        $.modal.loading("保存中...");
        $.post(ctx + 'info/info/saveQrcode', data, function(res) {
            $.modal.closeLoading();
            window.location.reload()
        })
    }

</script>

</html>